<template>
  <div class="body">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="700px" :close-on-click-modal="false" @close="close">
      <div>
        <el-form ref="form" :model="form" label-width="180px" style="margin-top: 0">
          <el-form-item label="商品是否参加折扣" prop="open">
            <el-radio-group v-model="form.open">
              <el-radio label="1">开启</el-radio>
              <el-radio label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%" v-show="form.open=='1'">
          <el-table-column prop="level" label="vip等级">
            <template slot-scope="scope">
              <div class="flex">
                <p>
                  <el-tag size="medium" type="info">vip{{scope.row.level}}</el-tag>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category_name" label="会员折扣" width="300">
            <template slot-scope="scope">
              <div class="flex">
                <el-input-number v-model="scope.row.discount" :precision="1" controls-position="right" :min="1" :max="99999999" class></el-input-number>
                <span class="mar_l10">折</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="启用状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.open" active-value="1" inactive-value="2"></el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { goodsVip, saveGoodsVip } from '@/api/user';
// import {mapState} from "vuex";

export default {
  name: 'goodlistedit',
  created() {},
  // computed: {
  //     ...mapState(['storeId']),
  // },
  data() {
    return {
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      form: {
        open: '2',
        goodsId: ''
      },
      title: '',
      dialogFormVisible: false,
      storeId: ''
    };
  },
  components: {},
  methods: {
    showEdit(row) {
      if (!row) {
        this.title = '添加';
      } else {
        this.title = '编辑';
        this.form.open = row.discountOpen;
        this.form.goodsId = row.id;
        this.goodsVip(row);
      }
      this.dialogFormVisible = true;
    },
    setStoreId(storeId) {
      this.storeId = storeId;
    },
    async goodsVip(row) {
      const { data } = await goodsVip({ goodsId: row.id });
      this.list = data ? data : [];
    },
    close() {
      // this.$refs["form"].resetFields();
      // this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    async save() {
      let param = {
        discountOpen: this.form.open,
        goodsId: this.form.goodsId,
        discountArr: this.list
      };
      const { msg } = await saveGoodsVip(param);
      this.$baseMessage(msg, 'success');
      this.$emit('fetchData');
      this.close();
    }
  }
};
</script>
